<template>
  <div class="index-container">
    <div class="left-vertical">
      <div class="rank-content">
        <div class="rank-title title">本月终端销售TOP10</div>
        <div class="rank-items">
          <ul>
            <li class="rank-li"
                v-for="(items, index) in salesList"
                :key="index">
              <div class="rank-left">
                <div class="rank-num">{{ index + 1 }}</div>
                <div>{{ items.equipment_name }}</div>
              </div>
              <div class="rank-right">{{ items.count }}&nbsp;笔</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="rank-content">
        <div class="rank-title title">本月商品销售TOP10</div>
        <div class="rank-items">
          <ul>
            <li class="rank-li"
                v-for="(items, index) in goodsSaleList"
                :key="index">
              <div class="rank-left">
                <div class="rank-num">{{ index + 1 }}</div>
                <div>{{ items.goods_name }}</div>
              </div>
              <div class="rank-right">{{ items.count }}&nbsp;笔</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="middle-vertical">
      <div class="middle-top">
        <div class="upcoming">
          <div class="upcome-title title">待办事项</div>
          <div class="upcome-items">
            <div class="upcome-content">
              <div class="content-name">
                待审核终端
              </div>
              <div class="content-count">
                {{ upcomeList.equipment_count}}
              </div>
            </div>
            <div class="upcome-content">
              <div class="content-name">
                待审核广告
              </div>
              <div class="content-count">
                {{ upcomeList.video_count}}
              </div>
            </div>
            <div class="upcome-content">
              <div class="content-name">
                待维修终端
              </div>
              <div class="content-count">
                {{ upcomeList.maintain_count}}
              </div>
            </div>
            <div class="upcome-content">
              <div class="content-name">
                待处理退款
              </div>
              <div class="content-count">
                {{ upcomeList.refund_count}}
              </div>
            </div>
          </div>
        </div>
        <div class="transaction">
          <div class="trad-today">
            <div class="today-img">
              <img src="../../assets/images/icon_jye@2x.png" />
            </div>
            <div class="today-content">
              <div class="content-count">{{ upcomeList.today_order_money?upcomeList.today_order_money: 0}}</div>
              <div class="content-mess">
                <div class="content-name">今日交易额</div>
                <div class="content-amount">{{ upcomeList.today_order_count }}笔交易</div>
              </div>
            </div>
          </div>
          <div class="trad-all">
            <div class="all-img">
              <img src="../../assets/images/icon_zjye@2x.png" />
            </div>
            <div class="today-content">
              <div class="content-count">{{ upcomeList.all_order_money?upcomeList.all_order_money: 0}}</div>
              <div class="content-mess">
                <div class="content-name">总交易额</div>
                <div class="content-amount">{{ upcomeList.all_order_count}}笔交易</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="middle-bottom">
        <div class="online-amount title">终端在线数量</div>
        <div class="terminal-online">
          <div class="online-map"
               id="main-map"></div>
          <div class="distribution-city">
            <div class="rank-title">终端分布城市排行</div>
            <div class="rank-items">
              <ul>
                <li class="rank-li"
                    v-for="(items, index) in onlineCityList"
                    :key="index">
                  <div class="rank-left">
                    <div class="rank-num">{{ index + 1 }}</div>
                    <div>{{ items.region_name }}</div>
                  </div>
                  <div class="rank-right">{{ items.count }}&nbsp;台</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-vertical">
      <div class="announcement">
        <div class="notice-title title">通知公告</div>
        <div>
          <div v-for="(items, index) in noticeList"
               :key="index"
               class="notice-items">
            <div class="notice-content">
              <div class="notice-name">{{ items.name.substr(0, 1) }}</div>
              <div class="notice-mess">
                <div>
                  <span class="items-name">{{ items.name }}</span>
                  <span>{{ items.content }}</span>
                </div>
                <div class="items-time">{{ items.time }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="drop-down"></div>
      </div>
      <div class="market">
        <div class="market-title title">近半年销售数据分析</div>
        <div class="sales-analysis"
             id="sales-analysis"></div>
      </div>
      <div class="Pay">
        <div class="Pay-title title">本月支付方式</div>
        <div class="pay-way"
             id="pay-way"></div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import { getToken } from "@/utils/auth"; // get token from cookie
import echarts from "echarts";
import china from "@/assets/json/china.json";
export default {
  name: "Login",
  data() {
    return {
      salesList: [],
      goodsSaleList: [],
      onlineCityList: [
        { name: "北京市", count: 865 },
        { name: "深圳市", count: 624 },
        { name: "上海市", count: 546 },
        { name: "厦门市", count: 432 },
        { name: "广州市", count: 432 },
        { name: "福州市", count: 546 },
        { name: "北京市", count: 865 },
        { name: "深圳市", count: 624 },
        { name: "上海市", count: 546 },
        { name: "厦门市", count: 432 },
        { name: "广州市", count: 432 },
        { name: "福州市", count: 546 }
      ],
      upcomeList: {},
      noticeList: [
        {
          avatar: "../../assets/images/icon_jye@2x.png",
          name: "管理员",
          content: "同意了您的终端申请",
          time: "12: 42"
        },
        {
          avatar: "",
          name: "超级管理员",
          content: "同意了您的广告申请",
          time: "15:31"
        }
      ]
    };
  },
  created() {
    const token = getToken()
    if (token && !this.$store.state.socket.loginTransition && !this.$store.state.socket.loginAccount) {
      this.tokenLogin(token)
    }
    this.initData();
  },
  mounted() {
    this.onlineEquipmentData();
    this.payWayData()
    this.salesData()
  },
  methods: {
    tokenLogin(token) {
      const path = {
        app: "wxadmin",
        api: "api_wxadmin_admin_keepLogin",
        version: "1.0",
        type: 2,
        data: {
          token: token
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    initData() {
      this.topSaleData();
      this.upComingData();
    },
    topSaleData() {
      const path = {
        app: "index",
        api: "api_index_index_sellRanking",
        version: "1.0",
        data: {
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    upComingData() {
      const path = {
        app: "user",
        api: "api_index_index_await",
        version: "1.0",
        type: 2,
        data: {
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    onlineEquipmentData() {
      const path = {
        app: "user",
        api: "api_index_index_regionRanking",
        version: "1.0",
        data: {
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    payWayData() {
      const path = {
        app: "index",
        api: "api_index_index_payData",
        version: "1.0",
        data: {
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    salesData() {
      const path = {
        app: "index",
        api: "api_index_index_saleData",
        version: "1.0",
        data: {
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    showMap(data) {
      let fujian = 0;
      let beijing = 0;
      let tianjin = 0;
      let hebei = 0;
      let shanxi = 0;
      let neimenggu = 0;
      let liaoning = 0;
      let jilin = 0;
      let heilongjiang = 0;
      let shanghai = 0;
      let jiangsu = 0;
      let zhejiang = 0;
      let anhui = 0;
      let jiangxi = 0;
      let shandong = 0;
      let henan = 0;
      let hubei = 0;
      let hunan = 0;
      let guangdong = 0;
      let guangxi = 0;
      let hainan = 0;
      let chongqing = 0;
      let sichuan = 0;
      let guizhou = 0;
      let yunnan = 0;
      let xizang = 0;
      let shanxi2 = 0;
      let gansu = 0;
      let qinghai = 0;
      let ningxia = 0;
      let xinjiang = 0;
      let taiwan = 0;
      let xianggang = 0;
      let aomen = 0;
      data.region_equipment_ranking.forEach(element => {
        const rigionId = element.region_id.toString().substring(0, 2);
        if (rigionId === "11") {
          beijing += element.count;
        } else if (rigionId === "12") {
          tianjin += element.count;
        } else if (rigionId === "13") {
          hebei += element.count;
        } else if (rigionId === "14") {
          shanxi += element.count;
        } else if (rigionId === "15") {
          neimenggu += element.count;
        } else if (rigionId === "21") {
          liaoning += element.count;
        } else if (rigionId === "22") {
          jilin += element.count;
        } else if (rigionId === "23") {
          heilongjiang += element.count;
        } else if (rigionId === "31") {
          shanghai += element.count;
        } else if (rigionId === "32") {
          jiangsu += element.count;
        } else if (rigionId === "33") {
          zhejiang += element.count;
        } else if (rigionId === "34") {
          anhui += element.count;
        } else if (rigionId === "35") {
          fujian += element.count;
        } else if (rigionId === "36") {
          jiangxi += element.count;
        } else if (rigionId === "37") {
          shandong += element.count;
        } else if (rigionId === "41") {
          henan += element.count;
        } else if (rigionId === "42") {
          hubei += element.count;
        } else if (rigionId === "43") {
          hunan += element.count;
        } else if (rigionId === "44") {
          guangdong += element.count;
        } else if (rigionId === "45") {
          guangxi += element.count;
        } else if (rigionId === "46") {
          hainan += element.count;
        } else if (rigionId === "50") {
          chongqing += element.count;
        } else if (rigionId === "51") {
          sichuan += element.count;
        } else if (rigionId === "52") {
          guizhou += element.count;
        } else if (rigionId === "53") {
          yunnan += element.count;
        } else if (rigionId === "54") {
          xizang += element.count;
        } else if (rigionId === "61") {
          shanxi2 += element.count;
        } else if (rigionId === "62") {
          gansu += element.count;
        } else if (rigionId === "63") {
          qinghai += element.count;
        } else if (rigionId === "64") {
          ningxia += element.count;
        } else if (rigionId === "65") {
          xinjiang += element.count;
        } else if (rigionId === "71") {
          taiwan += element.count;
        } else if (rigionId === "81") {
          xianggang += element.count;
        } else if (rigionId === "82") {
          aomen += element.count;
        }
      });
      const mapData = [
        { name: "北京", value: beijing },
        { name: "天津", value: tianjin },
        { name: "河北", value: hebei },
        { name: "山西", value: shanxi },
        { name: "内蒙古", value: neimenggu },
        { name: "辽宁", value: liaoning },
        { name: "吉林", value: jilin },
        { name: "黑龙江", value: heilongjiang },
        { name: "上海", value: shanghai },
        { name: "江苏", value: jiangsu },
        { name: "浙江", value: zhejiang },
        { name: "安徽", value: anhui },
        { name: "福建", value: fujian },
        { name: "江西", value: jiangxi },
        { name: "山东", value: shandong },
        { name: "河南", value: henan },
        { name: "湖北", value: hubei },
        { name: "湖南", value: hunan },
        { name: "广东", value: guangdong },
        { name: "广西", value: guangxi },
        { name: "海南", value: hainan },
        { name: "重庆", value: chongqing },
        { name: "四川", value: sichuan },
        { name: "贵州", value: guizhou },
        { name: "云南", value: yunnan },
        { name: "西藏", value: xizang },
        { name: "陕西", value: shanxi2 },
        { name: "甘肃", value: gansu },
        { name: "青海", value: qinghai },
        { name: "宁夏", value: ningxia },
        { name: "新疆", value: xinjiang },
        { name: "台湾", value: taiwan },
        { name: "香港", value: xianggang },
        { name: "澳门", value: aomen }
      ];
      const optionMap = {
        title: {
          text: "当前数量：" + data.sum_count + "台",
          left: "24px",
          bottom: "54px",
          textStyle: {
            fontSize: "16px",
            fontweight: 400,
            color: "#333"
          }
        },
        tooltip: {},
        legend: {
          orient: "vertical",
          left: "left",
          data: [""]
        },
        visualMap: {
          type: "piecewise",
          splitNumber: 4,
          orient: "horizontal",
          left: "24px",
          bottom: "24px",
          text: [" 高", "密度:  低"],
          calculable: true,
          color: ["#2D67E8", "#C6D9F1"]
        },
        selectedMode: "single",
        series: [
          {
            name: "",
            type: "map",
            mapType: "china",
            itemStyle: {
              normal: {
                borderColor: "#ffffff"
              },
              emphasis: {
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            showLegendSymbol: false,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: mapData
          }
        ]
      };
      const myChartContainer = document.getElementById("main-map");
      echarts.registerMap("china", china);
      const myChartChina = echarts.init(myChartContainer);
      myChartChina.setOption(optionMap);
      window.onresize = myChartChina.resize;
    },
    showSales(data) {
      const name = [];
      const count = [];
      data.forEach(element => {
        name.push(element.month)
        count.push(element.order_money)
      })
      const option = {
        title: {
          text: ""
        },
        grid: {
          left: "12%",
          right: "14%",
          width: 'auto',
          height: 'auto'
        },
        xAxis: [{
          type: 'category',
          data: name.reverse(),
          // 设置轴线的属性
          axisLine: {
            lineStyle: {
              color: '#E0E0E0',
              fontSize: 16,
              width: 1 // 这里是为了突出显示加上的
            }
          }
        }
        ],
        yAxis: [
          {
            type: 'value',
            scale: false,
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#E0E0E0',
                fontSize: 16
              }
            },
            // min: 0,
            // max: 500, // 设置左侧最大值
            axisLabel: {
              show: true,
              textStyle: {
                color: '#E0E0E0',
                fontSize: 16
              }
            },
            axisLine: {
              lineStyle: {
                color: '#E0E0E0',
                fontSize: 16
              }
            }
          },
          {
            type: 'value',
            scale: true,
            splitLine: {
              show: true,
              lineStyle: {
                // type: 'dashed', // 虚线
                color: '#E0E0E0'
              }
            },
            max: 100,
            min: 0,
            axisLine: {
              lineStyle: {
                color: '#E0E0E0'
              }
            },
            axisLabel: {
              formatter: '{value}%', // 右侧以百分比进行展示
              show: true,
              textStyle: {
                color: '#E0E0E0',
                fontSize: 16
              }
            },
            textStyle: {
              color: '#E0E0E0',
              fontSize: 16
            }
            // boundaryGap: [0.2, 0.2]
          }
        ],
        series: [
          {
            type: "bar",
            barWidth: 16, // 柱图宽度
            data: count.reverse(),
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                // 柱子颜色
                color: "#2D67E8"
              }
            }
          }
        ]
      };
      const salesChart = document.getElementById("sales-analysis");
      const myChartSales = echarts.init(salesChart);
      myChartSales.setOption(option);
      window.onresize = myChartSales.resize;
    },
    showPayWay(data) {
      const option = {
        color: ['rgba(176, 212, 251, 1)'],
        legend: {
          show: true,
          itemGap: 12,
          orient: 'vertical',
          right: '15%',
          top: "center",
          data: ['支付宝支付', '微信支付'],
          formatter: function(name) {
            // 获取legend显示内容
            let data = option.series[0].data;
            let total = 0;
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name === name) {
                tarValue = data[i].value;
              }
            }
            let p = (tarValue / total * 100).toFixed(2);
            return name + ' ' + ' ' + p + '%';
          }
        },

        series: [{
          name: 'Line 1',
          type: 'pie',
          clockWise: true,
          radius: ['50%', '66%'],
          center: ["30%", "53%"],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value: data.wxpay,
            name: '支付宝支付',
            itemStyle: {
              normal: {
                color: "#FFB300",
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '微信支付',
            value: data.wxpay,
            itemStyle: {
              normal: {
                color: "#6F86FF",
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }]
        }]
      };
      const payChart = document.getElementById("pay-way");
      const myChartPay = echarts.init(payChart);
      myChartPay.setOption(option);
      window.onresize = myChartPay.resize;
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === 10000) {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            })
          } else if (resj.api === "api_index_index_await") {
            this.upcomeList = resj.data;
          } else if (resj.api === "api_index_index_sellRanking") {
            this.salesList = resj.data.equipment_count;
            this.goodsSaleList = resj.data.goods_count;
          } else if (resj.api === "api_index_index_regionRanking") {
            this.onlineCityList = resj.data.region_equipment_ranking.slice(0, 11)
            this.showMap(resj.data);
          } else if (resj.api === "api_index_index_payData") {
            this.showPayWay(resj.data)
          } else if (resj.api === "api_index_index_saleData") {
            this.showSales(resj.data)
          }
        } else if (resj.code === 403 && resj.api === "api_wxadmin_admin_keepLogin") {
          this.$router.push({ path: "/login" });
        } else { this.$message.error(resj.message); }
      }
    }
  }
};
</script>
<style scoped>
@font-face {
  font-family: "Omega Sans";
  src: url("../../assets/font/Omega-Sans-Regular-2.ttf");
}
.index-container {
  padding: 1.897% 1.897% 1.897% 0.949%;
  background-color: #f0f2f5;
  display: flex;
}
.rank-content {
  background-color: #ffffff;
  border-bottom: 8px solid #2d4198;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  box-sizing: border-box;
}
.left-vertical {
  width: 19.525%;
}
.right-vertical {
  width: 26.846%;
}
.middle-vertical {
  width: 53.629%;
  padding: 0 0.977%;
  box-sizing: border-box;
}
.left-vertical .rank-content:last-child {
  margin-bottom: 0;
}
.title {
  height: 80px;
  font-size: 20px;
  display: flex;
  align-items: center;
  font-weight: Bold;
  border-bottom: 1px solid #e0e0e0;
  box-sizing: border-box;
}
.rank-title {
  justify-content: center;
}
.rank-li {
  display: flex;
  justify-content: space-between;
  padding: 7.5px 0;
  font-size: 14px;
  box-sizing: border-box;
}
.rank-items {
  padding: 16px 5%;
  box-sizing: border-box;
}
.rank-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.rank-num {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background-color: #7dadff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 0.875rem;
}
.rank-items ul li:first-child .rank-num {
  background-color: #fb4c61;
}
.rank-items ul li:nth-child(2) .rank-num {
  background-color: #fba24c;
}
.rank-items ul li:nth-child(3) .rank-num {
  background-color: #2d67e8;
}
.middle-top {
  display: flex;
  justify-content: space-between;
}
.upcoming {
  width: 44%;
  background-color: #fff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.transaction {
  width: 53.76%;
}
.upcome-title {
  padding-left: 16px;
}
.upcome-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.upcome-content {
  padding-left: 16px;
  box-sizing: border-box;
  border-bottom: 1px solid #ebebeb;
  border-right: 1px solid #ebebeb;
  width: 50%;
  height: 99px;
}
.upcome-items .upcome-content:nth-child(even) {
  border-right: none;
}
.upcome-items .upcome-content:nth-last-child(2),
.upcome-items .upcome-content:last-child {
  border-bottom: none;
}
.upcome-content .content-name {
  color: #999999;
  font-size: 16px;
  padding: 10px 0 4px 0;
}
.upcome-content .content-count {
  color: #333333;
  font-size: 48px;
  font-family: Omega Sans;
  font-weight: 400;
}
.trad-today,
.trad-all {
  height: 132px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.today-img,
.all-img {
  width: 132px;
  height: 132px;
  border-radius: 4px 0px 0px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.today-img {
  background-color: #7e5ced;
}
.all-img {
  background-color: #2d67e8;
}
.today-img img,
.all-img img {
  width: 32px;
  height: 32px;
}
.today-content {
  width: calc(100% - 132px);
}
.transaction .content-count {
  color: #333333;
  font-size: 56px;
  padding: 0 7.2%;
  box-sizing: border-box;
  font-family: Omega Sans;
  font-weight: 400;
}
.transaction .content-mess {
  padding: 0 7.2%;
  box-sizing: border-box;
}
.transaction .content-mess {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.transaction .content-name {
  font-size: 16px;
  color: #999999;
}
.transaction .content-amount {
  font-size: 16px;
}
.trad-all {
  margin-top: 16px;
}
.middle-bottom {
  margin-top: 16px;
  width: 100%;
  height: 640px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.online-amount {
  padding-left: 1.89%;
}
.announcement {
  width: 100%;
  height: 280px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.notice-title {
  padding-left: 3.6%;
}
.notice-items {
  display: flex;
  align-items: baseline;
  padding-left: 16px;
}
.notice-content {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}
.notice-name {
  width: 40px;
  height: 40px;
  background-color: #2d67e8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.notice-mess {
  flex: 1;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}
.notice-items .items-name {
  color: #2d67e8;
}
.notice-items .items-time {
  color: #999999;
}
.drop-down {
  width: 100%;
  height: 20px;
  background-color: #2d4198;
  border-radius: 0px 0px 4px 4px;
}
.market {
  margin-top: 16px;
  height: 376px;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.market-title,
.Pay-title {
  padding-left: 16px;
}
.Pay {
  margin-top: 16px;
  height: 248px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.online-map {
  width: 663px;
  height: 560px;
}
.terminal-online {
  display: flex;
}
.distribution-city {
  flex: 1;
  border-left: 1px solid #e0e0e0;
}
.rank-title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  padding: 36px 0 0 24px;
}
.distribution-city .rank-items {
  padding-left: 24px;
}
.distribution-city .rank-items .rank-li {
  padding: 9px 0;
}
.sales-analysis {
  height: 296px;
}
.pay-way {
  width: 100%;
  height: 167px;
}
</style>
